<template>
  <avue-crud v-model="form"
             :option="option"
             :data="data"
             ref="crud"
             @row-save="rowSave"
             @row-update="rowUpdate"
             @row-del="rowDel">
    <template #icon="scope">
      <i :class="scope.row.icon"
         style="font-size:24px"></i>
    </template>
    <template #menu="{row,size,type}">
      <el-button :size="size"
                 :type="type"
                 @click="handleAdd(row)">新增子级</el-button>
    </template>
  </avue-crud>
</template>
<script>
export default {
  data () {
    return {
      parentId: undefined,
      form: {},
      data: [
        {
          id: 10,
          event: '事件1',
          timeLine: 50,
          comment: '无'
        },
        {
          id: 1,
          event: '事件1',
          timeLine: 100,
          comment: '无',
          children: [
            {
              parentId: 1,
              id: 2,
              event: '事件2',
              timeLine: 10,
              comment: '无'
            },
            {
              parentId: 1,
              id: 3,
              event: '事件3',
              timeLine: 90,
              comment: '无',
              children: [
                {
                  parentId: 3,
                  id: 4,
                  event: '事件4',
                  timeLine: 5,
                  comment: '无'
                },
                {
                  parentId: 3,
                  id: 5,
                  event: '事件5',
                  timeLine: 10,
                  comment: '无'
                }
              ]
            }
          ]
        }
      ],
      option: {
        headerAlign: 'center',
        align: 'center',
        border: true,
        index: true,
        rowKey: 'id',
        rowParentKey: 'parentId',
        // defaultExpandAll:true,
        column: [
          {
            label: '事件',
            prop: 'event',
            align: 'left',
            width: 200
          },
          {
            label: '时间线',
            prop: 'timeLine'
          },
          {
            label: '备注',
            prop: 'comment'
          }
        ],
      }
    }
  },
  methods: {
    rowDel (row, index, done) {
      done(row)
    },
    rowSave (row, done) {
      row.parentId = this.parentId;
      row.id = new Date().getTime()
      this.parentId = undefined;
      done(row)
    },
    rowUpdate (row, index, done) {
      done(row)
    },
    handleAdd (row) {
      this.parentId = row.id
      this.$refs.crud.rowAdd()
    }
  }
}
</script>